
<template>
  <div class="tab-bar h-14 flex items-center">
    <div class="flex-1 flex items-center justify-center" 
         v-for="tab in tabs" 
         :key="tab.id"
         @click="switchTab(tab.path)">
      <div class="flex flex-col items-center">
        <i :class="[isActive(tab.path) ? tab.activeIcon : tab.icon, 'text-xl']"
           :class="isActive(tab.path) ? 'text-wechat-green' : 'text-gray-500'"></i>
        <span class="text-xs mt-1"
              :class="isActive(tab.path) ? 'text-wechat-green' : 'text-gray-500'">
          {{ tab.name }}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

const tabs = [
  {
    id: 'chats',
    name: '微信',
    icon: 'fas fa-comment',
    activeIcon: 'fas fa-comment-dots',
    path: '/chats'
  },
  {
    id: 'contacts',
    name: '通讯录',
    icon: 'fas fa-address-book',
    activeIcon: 'fas fa-address-book',
    path: '/contacts'
  },
  {
    id: 'discover',
    name: '发现',
    icon: 'fas fa-compass',
    activeIcon: 'fas fa-compass',
    path: '/discover'
  },
  {
    id: 'profile',
    name: '我',
    icon: 'fas fa-user',
    activeIcon: 'fas fa-user',
    path: '/profile'
  }
]

const isActive = (path: string) => {
  return route.path === path
}

const switchTab = (path: string) => {
  router.push(path)
}
</script>
